<template>
  <div v-show="show" class="dialog">
    <div class="content">
      <ListItem :v="v" />

      <div class="sku-list">
        <ul>
          <li v-for="(v, i) in v.sku" :key="i">
            <h4>{{ v.label }}</h4>
            <van-space style="padding: 10px">
              <van-tag
                v-for="(item, i) in v.list"
                :plain="obj[v.name] === item.name ? false : true"
                :key="i"
                type="primary"
                @click="obj[v.name] = item.name"
                >{{ item.name }}</van-tag
              >
            </van-space>
          </li>
        </ul>
      </div>

      <van-button type="primary" block @click="handleComplate">完成</van-button>
    </div>
  </div>
</template>

<script setup>
import { defineProps, ref } from 'vue'
import ListItem from '@/components/list-item/index.vue'
defineProps(['show', 'v'])
const emits = defineEmits(['handleOk'])
const handleComplate = () => {
  emits('handleOk', obj.value)
}
const obj = ref({
  color: '',
  version: '',
  protect: ''
})
</script>

<style lang="scss" scoped>
.content {
  position: absolute;
  bottom: 0;
  left: 0;
  min-height: 200px;
  width: 100vw;
  background-color: white;
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
}

.dialog {
  position: fixed;
  left: 0;
  top: 0;
  background-color: rgba($color: #000000, $alpha: 0.6);
  width: 100vw;
  height: 100vh;
  z-index: 10;
}
</style>
